<script lang="ts" setup>
import type { ColumnsType, TableRowSelection } from 'ant-design-vue/es/table/interface';
import { reactive } from 'vue';

const filterValue = reactive({
  status: null as null | number,
  keyword: ""
});
const page = reactive({
  current: 10,
  total: 120
});
const rowSelection: TableRowSelection = {
  checkStrictly: true,
  columnWidth: 60,
  preserveSelectedRowKeys: false,
  onChange: () => {
    // TODO 复选框变化
  }
};
const table = reactive({
  rowSelection,
  loading: false,
  columns: [
    { title: "序号", dataIndex: "index", width: 80, align: 'center' },
    { title: "用户名", dataIndex: "account" },
    { title: "姓名", dataIndex: "name" },
    { title: "角色", dataIndex: "role" },
    { title: "所属部门", dataIndex: "department" },
    { title: "创建日期", dataIndex: "createDate" },
    { title: "更新日期", dataIndex: "updateDate" },
    { title: "状态", dataIndex: "status", width: 100 },
    { title: "操作", dataIndex: "operation", width: 260 }
  ] as ColumnsType,
  data: [
    {index: 1, account: "admin", name: "刘婷婷", role: "管理员", department: "技术部", status: true, createDate: "2022-01-01 15:11:12", updateDate: "2022-01-01 17:22:33"},
    {index: 2, account: "test", name: "刘婷婷", role: "管理员", department: "市场部", status: true},
    {index: 3, account: "a06514", name: "刘婷婷", role: "管理员", department: "技术部", status: true},
    {index: 4, account: "admin", name: "刘婷婷", role: "管理员", department: "技术部", status: true},
    {index: 5, account: "admin", name: "刘婷婷", role: "管理员", department: "技术部", status: true},
    {index: 6, account: "admin", name: "刘婷婷", role: "管理员", department: "技术部", status: true},
    {index: 7, account: "admin", name: "刘婷婷", role: "管理员", department: "技术部", status: true},
    {index: 8, account: "admin", name: "刘婷婷", role: "管理员", department: "技术部", status: true},
    {index: 9, account: "admin", name: "刘婷婷", role: "管理员", department: "技术部", status: true},
    {index: 10, account: "admin", name: "刘婷婷", role: "管理员", department: "技术部", status: true},
    {index: 11, account: "admin", name: "刘婷婷", role: "管理员", department: "技术部", status: true},
    {index: 12, account: "admin", name: "刘婷婷", role: "管理员", department: "技术部", status: true},
    {index: 13, account: "admin", name: "刘婷婷", role: "管理员", department: "技术部", status: true},
    {index: 14, account: "admin", name: "刘婷婷", role: "管理员", department: "技术部", status: true},
    {index: 15, account: "admin", name: "刘婷婷", role: "管理员", department: "技术部", status: true},
    {index: 16, account: "admin", name: "刘婷婷", role: "管理员", department: "技术部", status: true},
  ]
});

// 搜索、条件变化
const onSearch = () => {

}

// 分页事件
const onPageChange = () => {
  console.log(page.current);
}
</script>
<script lang="ts">
export default { name: "userManage" }
</script>

<template>
  <!-- 用户管理 -->
  <section class="container">
    <table-layout v-model:current="page.current" :total="page.total" @search="onSearch" @page-change="onPageChange">
      <!-- 自定义渲染过滤条件表单 -->
      <template #filter-form>
        <a-form-item label="所属部门">
          <a-input v-model:value="filterValue.keyword" placeholder="请选择部门" />
        </a-form-item>
        <a-form-item label="状态">
          <a-input v-model:value="filterValue.status" placeholder="分类名称" />
        </a-form-item>
        <a-form-item label="用户名">
          <a-input v-model:value="filterValue.status" placeholder="用户名/姓名" />
        </a-form-item>
        <a-form-item label="角色名称">
          <a-input v-model:value="filterValue.status" placeholder="角色名称" />
        </a-form-item>
      </template>

      <!-- 自定义渲染表格头部按钮部分 -->
      <template #table-header-btn>
        <a-button danger>批量删除</a-button>
        <a-button type="primary">+ 新增</a-button>
      </template>

      <!-- 自定义渲染表格部分 -->
      <template #table-content>
        <a-table :size="$config.TABLE_SIZE" bordered row-key="index" :pagination="false" :columns="table.columns" :data-source="table.data"
          :row-selection="table.rowSelection">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex == 'status'">
              <a-switch v-model:checked="record.status" checked-children="启用" un-checked-children="停用" />
            </template>

            <template v-else-if="column.dataIndex == 'operation'">
              <a-button danger type="link">删除</a-button>
              <a-divider type="vertical" />
              <a-button type="link">编辑</a-button>
              <a-divider type="vertical" />
              <a-button type="link">解锁</a-button>
              <a-divider type="vertical" />
              <a-button danger type="link">重置密码</a-button>
            </template>
          </template>
        </a-table>
      </template>
    </table-layout>
  </section>
</template>

<style lang="less" scoped>
.container {
  height: 100%;
}
</style>